Masterly - Personal Portfolio One Page HTML Template.

Introduction

  • Item Name : Masterly - Personal Portfolio One Page HTML Template.
  • Item Version : 1.1
  • Author : ashishmaraviya
  • Copyright : 2022-2023

First of all, thank you so much for purchasing this Masterly Template and for being my loyal customer. You are awesome! You are entitled to get free lifetime updates to this product + exceptional support from the author directly.

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML, CSS | SCSS & JS knowledge is required to customize this item. You may learn basics here and here .

Getting Started

Requirements

You will need the following sofwares to customize this template.

  1. Code Editing Software (eg: Visual studio code, Dreamweaver, Sublime Text or Notepad++)
  2. For SCSS build up (eg: koala, prepos, codekit etc...)
  3. Web Browser for testing (eg: Google Chrome or Mozilla Firefox)
Note : Be careful while editing the item. If not edited properly, the design layout may break completely.

Include Files

  • HTML
  • CSS
  • SCSS
  • JS
  • IMAGES(Demo images only)
  • FONT

Files Structure :

  • css
    • Plugins - ( Plugin stylesheets )
  • fonts
    • montserrat - ( montserrat fonts )
    • quicksand - ( quicksand fonts )
  • images
    • bg
    • chat
    • experience
    • favicon
    • instagram
    • logo
    • news
    • portfolio
    • service
    • shape
  • js
    • plugins - ( Plugins js files )
  • scss
    • base - ( typography, font familys )
    • bootstrap - ( Bootstrap folder )
    • components - ( Component stylesheets )
    • layout - ( Layout stylesheets )
    • utilities - ( Mixins & variable stylesheets )

Local Server Installation

➣ There are the Four things to setup & run the theme.

1. Install & Start Xampp Server Click
2. How to Setup Theme Code Folder Click
3. Database Configuration Click (this theme have not use any database, because it's html template)
4. Run the theme into browser Click

Step-1 : ➣ Install & Start Xampp Server

➣ Download the letest version of Xampp & Install Xampp Server Click

➣ Click on Start button to start Apache & MySql into Xampp Server

➣ Now blow image show the running Xampp Server

Now Xammp Instalation process end up here and move to the next step below..

Step-2 : ➣ How to Setup Theme Code Folder

➣ Open unzip folder Masterly - Personal Portfolio One Page HTML Template. and copy masterly-html folder as show below image

➣ Now open Xampp folder

➣ After that open htdocs folder

➣ Now paste already copied masterly-html folder into htdocs

Step-3 : ➣ Database Configuration

This theme have not use any database, because it's html template and not needed any type of database configuration. theme directly run in localhost or server.

Step-4 : ➣ Run the landing into browser

➣ Open Browser and run the Landing page to type located theme path : localhost/masterly-html/ as show below image

➣ Now you can take a look on any of the layout by choosing on top of the site menu.

Step-5 : ➣ Run the Home page into browser

➣ Open Browser and run the Home page to type located theme path : localhost/masterly-html/demo-2 as show below image

Live Server Installation

➣ There are the Four things to setup & run the theme.

1. Hosting Account Click
2. How to Setup Theme Code Folder Click
3. Database Configuration Click (this theme have not use any database, because it's html template)
4. Run the theme into browser Click
Step-1 : ➣ Hosting Account

➣ You must have Hosting account. And if you don't have please purchase it before move ahed. Click

Note: I am just giving the example of Hosting account you can purchase any of hosting account that support PHP.

➣ Get Login into your hostinger account and open dashboard.

Now Hosting account end up here and move to the next step below..

Step-2 : ➣ How to Setup Theme Code Folder

➣ From Dashboard Click on File Manager as show below image

➣ Now upload Masterly-html.zip folder into server

➣ After upload unzip this folder as shown below image

Now the Theme Code setup is finished here move to the next step below..

Step-3 : ➣ Database Configuration

This theme have not use any database, because it's html template and not needed any type of database configuration. theme directly run in localhost or server.

Step-4 : ➣ Run the Landing Page into browser

➣ Open Browser and run the "Landing page" to type located theme path : yourdomain.com/masterly-html/ as show below image

➣ Now you can take a look on any of the layout by choosing on top of the site menu.

Step-5 : ➣ Run the Home Page into browser

➣ Open Browser and run the "Home page" to type located theme path : yourdomain.com/masterly-html/demo-2 as show below image

Colors Customization

If you want to apply skin color 2 (color-2.css) then, you can add path like bellow image on html files in head tag.

skin

Shape Customization (for demo-2)

If you want to apply Shape 3 (shape-3.css) then, you can add path like bellow image on html files in head tag.

skin

Dark mode Customization

If you want to apply Dark mode (dark.css) then, you can add path like bellow image on every html files in head tag. 

<link rel="stylesheet" href="assets/css/dark.css" class="dark">
skin

Whatsapp plugin Customization (Add custom number)

Customers can directly contact with you via whatsapp. You can replace whatsapp number and messages like bellow image.

skin

Customization & Source Files

Fonts

First download fonts which you want. and then paste fonts file in font folder.
and Goto "scss > base > _typography", and change. after compile your code and run thml file.

typo

Logo

If you want to change logo. Goto "assets/img/logo" folder and change logo png image.

<a class="navbar-brand" href="index.html"><img src="assets/img/logo/logo.png" alt="logo"></a>

Menus

If you want to add menu and change menu name.

<ul class="navbar-nav mb-2 ml-auto" id="top-menu">
    <li class="nav-item active">
	<a class="nav-link ms-nav" aria-current="page" href="#home">Home</a>
</li>
<li class="nav-item">
	<a class="nav-link ms-nav" href="#about">About</a>
</li>
<li class="nav-item">
	<a class="nav-link ms-nav" href="#experience">Experience</a>
</li>
<li class="nav-item">
	<a class="nav-link ms-nav" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
	<a class="nav-link ms-nav" href="#news">News</a>
</li>
<li class="nav-item">
	<a class="nav-link ms-nav" href="#contact">Contact Us</a>
</li>
</ul>

Source File (CSS)

<!-- css All Plugins Files -->
	<link rel="stylesheet" href="assets/css/plugins/animate.css" />
	<link rel="stylesheet" href="assets/css/plugins/swiper-bundle.min.css" />
	<link rel="stylesheet" href="assets/css/plugins/bootstrap.css" />
	<link rel="stylesheet" href="assets/css/plugins/jquery.fancybox.min.css" />    
	<link rel="stylesheet" href="assets/css/plugins/aos.min.css" />    
	<link rel="stylesheet" href="assets/css/plugins/owl.carousel.min.css" />    
	
	<!-- Main Style -->
	<link rel="stylesheet" id="main_style" href="assets/css/style.css" />
	<link rel="stylesheet" href="assets/css/responsive.css" />

Source File (JS)

<!-- Plugins JS -->
<script src="assets/js/plugins/jquery-3.5.1.min.js"></script>
<script src="assets/js/plugins/bootstrap.bundle.min.js"></script>
<script src="assets/js/plugins/jquery.fancybox.min.js"></script>
<script src="assets/js/plugins/mixitup.min.js"></script>
<script src="assets/js/plugins/fontawesome.js"></script>
<script src="assets/js/plugins/tilt.jquery.js"></script>
<script src="assets/js/plugins/aos.min.js"></script>
<script src="assets/js/plugins/owl.carousel.min.js"></script>
<script src="assets/js/plugins/infiniteslidev2.js"></script>
<script></script>
<!-- Main Js -->
<script src="assets/js/ms-tools.js"></script>
<script src="assets/js/main.js"></script>

Free Resources

  • Google Fonts
  • Font Awesome Icons
  • Owl Carousel
  • AOS Animation
  • Animate
  • Mixitup
  • tilt
  • Infiniteslidev2 (Instagram infinite slide)

Thank You

Thank you again for download 'Masterly', enjoy it and give us your valuable Review & Rating Here.

shapes